<template>
  <div  style="float: left; width: 50%"  >


    <h1 style="line-height: 10px">家常菜评分排行榜</h1>
    <el-col :span="24 " v-for="(item, index) in menus" :key="index">

      <el-image
        style="width: 230px; height: 200px"
        :src="item.image"
        class="image"></el-image>

      <el-col :span="12">
        <div style="height: 100px;">
          <p >{{item.menuName}}</p>
          <p>有{{item.heat}}人做过</p>
          <p>评分:{{item.score}}分</p>
          <p>作者描述:{{item.depict}}</p></div>
      </el-col>

    </el-col>
  </div>

</template>

<script>

export default {
  data() {
    return {
      menus: [],
    };
  },
  methods:{
    selectJCC:function (){

      this.$axios.get("/menuTJ/selectJCCScore").then(res=>{

        this.menus=res.data.data;
      })
    },
  },
  mounted(){
    this.selectJCC();
  }
}
</script>

<style scoped>

</style>
/menuTJ/selectJCCHeat
